<template>
	<scroll-view class="container" scroll-y="true">
		<view class="List" v-for="(item,index) in List" :key="index">
			<view class="header" v-if="index == 0">
				<div class="header_type">
					<image src="../../image/ai-book.png" class="heser_img"></image>
					<text class="hader_text">{{item.key}}</text>
				</div>
				<div class="header_btn" @click="getList(item.cate_id)">
					<text class="btn_text">更多</text>
					<image src="../../image/type01.png" class="btn_img"></image>
				</div>
			</view>
			<view class="header" v-if="index == 1">
				<div class="header_type">
					<image src="../../image/zazhimagazine.png" class="heser_img"></image>
					<text class="hader_text">{{item.key}}</text>
				</div>
				<div class="header_btn" @click="getList(item.cate_id)">
					<text class="btn_text">更多</text>
					<image src="../../image/type02.png" class="btn_img"></image>
				</div>
			</view>
			<view class="header" v-if="index == 2">
				<div class="header_type">
					<image src="../../image/ai-mark.png" class="heser_img"></image>
					<text class="hader_text">{{item.key}}</text>
				</div>
				<div class="header_btn" @click="getList(item.cate_id)">
					<text class="btn_text">更多</text>
					<image src="../../image/type03.png" class="btn_img"></image>
				</div>
			</view>
			<view class="content" >
				<view class="content_list" v-for="(val,ind) in item.data" :key="ind" @click="getDeatil(val.book_id,val)" v-if="ind<3">
					<image :src="val.cover" class="content_img"></image>
					<text class="content_text">{{val.title}}</text>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { mapState } from 'vuex'
	import { getBanner, gethomeUserInfo } from '../../api/home.js'
	// import postApi from "@/api/home"
	export default {
		data() {
			return {
				List:[]
			}
		},
		mounted() {
			getBanner().then(res =>{
				this.List = res.data
			})
		},
		methods:{
			getList(data){
				this.$Router.push({name: 'bookList',params: {cateId:data}})
			},
			getDeatil(data,val){
				if(val.flag == 2){
					window.location.href = val.url
				}else{
					// this.$Router.push({name: 'Authorization',params: {bookId: data}})
					this.$Router.push({name: 'bookDetail',params: {bookId: data}})
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{background: #FFFFFF;width: 100%;height:calc(100vh - 1rpx);}
	.List{
		padding:10px 15px;
		border-bottom: 0.5rem solid #F5F5F5;
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.header_type{
		display: flex;
		align-items: center;
	}
	.heser_img{
		width: 1.2rem;
		height: 1.4rem;
	}
	.hader_text{
		font-size: 1.1rem;
		color: 333333;
		font-weight: bold;
		margin-left: 0.5rem;
	}
	.header_btn{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn_img{
		width: 3.5rem;
		height: 1.5rem;
	}
	.btn_text{
		font-size: 0.9rem;
		color: #FFFFFF;
		position: absolute;
		z-index: 999;
	}
	.content{
		margin-top: 0.5rem;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}
	.content_list{
		width: 33.33%;
		// float: left;
		// margin-right: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.content_img{
		width: 6.8rem;
		height: 9.5rem;
		box-shadow: 0 0.2rem 0.15rem 0.15rem #f0f0f0;
		margin-bottom: 0.8rem;
	}
	.content_text{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: #666666 !important;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
